import QtQuick 1.1
import com.nokia.meego 1.1
import StarMenu 1.0

Item {

    StarMenu {
        id: starMenu
        objectName: "Menu5"
        anchors.fill: parent
        smooth: true
        delayChangePos: 100
        starCenterVisible: false
        useParentMenuCenter: true
        visualParent: main
        shape: StarMenu.ShapeGrid
        spacingH: 20
        spacingV: 20
        startingRadius: 80
        radiusIncrement: 12
        columns: 4
        center.x: main.width>>1
        center.y: main.height>>1

//        visualParent: main
//        color: Qt.rgba(0, 0, 0, 0.5)

        Column {
            id: controls
            visible: starMenu.open
            parent: starMenu.parent
            x: main.width-controls.width
            y: main.height-controls.height
            z: star1.z

            Row {
                Text {text: "columns"; font {bold: true; pixelSize: 30;} color: "#ffffff"}
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:1; maximumValue:14; width:250; height: 40
                    stepSize: 1
                    Component.onCompleted: value = 4
                    onValueChanged: starMenu.columns = value
                }
            }
            Row {
                Text {text: "spacingH"; font {bold: true; pixelSize: 30;} color: "#ffffff"}
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:0; maximumValue:300; width:250; height: 40
                    Component.onCompleted: value = starMenu.spacingH
                    onValueChanged: starMenu.spacingH = value
                }
            }
            Row {
                Text {
                    text: "spacingV"
                    font {bold: true; pixelSize: 30}
                    color: "#ffffff"
                }
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:0; maximumValue:300; width:250; height: 40
                    Component.onCompleted: value = starMenu.spacingV
                    onValueChanged: starMenu.spacingV = value
                }
            }
            Row {
                Text {
                    text: "startingRadius"
                    font {bold: true; pixelSize: 30}
                    color: "#ffffff"
                }
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:-200; maximumValue:200; width:250; height: 40
                    Component.onCompleted: value = starMenu.startingRadius
                    onValueChanged: starMenu.startingRadius = value
                }
            }
            Row {
                Text {
                    text: "radiusIncrement"
                    font {bold: true; pixelSize: 30}
                    color: "#ffffff"
                }
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:-40; maximumValue:40; width:250; height: 40
                    Component.onCompleted: value = starMenu2.radiusIncrement
                    onValueChanged: starMenu2.radiusIncrement = value
                }
            }
        }


        onStarMenuOpening: {textRect.text =
                           "<font size=4>StarItems can also be arranged into a <strong>grid</strong>, "+
                           "customizable with <strong>colums</strong>, <strong>spacingH</strong> and "+
                           "<strong>spacingV</strong> propertis or into a <strong>spiral</strong> shape with "+
                           "<strong>radius</strong> (the starting StarItem distance) and "+
                           "<strong>radiusIncrement</strong> (the amplitude of the spiral) properties.</font>";
            textRect.z = starMenu.z;
        }

        Behavior on rotation { NumberAnimation { duration: 1000; easing.type: Easing.OutQuad } }

        StarItem {
            id: star1
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            onClicked: console.log("HOVER ITEM STARITEM TEEXT CLICKKKED");

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0001.png"
            }
        }
        StarItem {
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0002.png"
            }
        }
        StarItem {
            width: 32; height: 32
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0003.png"
            }
        }

        StarItem {
            id: starItem
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on scale { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                id: image
                Behavior on scale { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "qt.png"
            }

            StarMenu {
                id: starMenu2
                anchors.fill: parent; smooth: true
                starCenterVisible: false
                useParentMenuCenter: true
                shape: StarMenu.ShapeSpiral
                startingRadius: starMenu.startingRadius
                radiusIncrement: starMenu.radiusIncrement

                StarItem {
                    width: 32; height: 32
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0001.png"
                    }
                }
                StarItem {
                    width: 40; height: 40
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0002.png"
                    }
                }
                StarItem {
                    width: 48; height: 48
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0003.png"
                    }
                }
                StarItem {
                    width: 56; height: 56
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0004.png"
                    }
                }
                StarItem {
                    width: 64; height: 64
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0005.png"
                    }
                }
                StarItem {
                    width: 72; height: 72
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0006.png"
                    }
                }
                StarItem {
                    width: 130; height: 130
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0007.png"
                    }
                }
                StarItem {
                    width: 80; height: 80
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0008.png"
                    }
                }
                StarItem {
                    width: 80; height: 80
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0009.png"
                    }
                }
                StarItem {
                    width: 80; height: 80
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0010.png"
                    }
                }
                StarItem {
                    width: 80; height: 80
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0011.png"
                    }
                }
                StarItem {
                    width: 80; height: 80
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0012.png"
                    }
                }
                StarItem {
                    width: 80; height: 80
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0013.png"
                    }
                }
                StarItem {
                    width: 80; height: 80
                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0014.png"
                    }
                }


            }
        }


        StarItem {
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0005.png"
            }
        }

        StarItem {
            width: 90; height: 90
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0006.png"
            }
        }

        StarItem {
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0007.png"
            }
        }


        StarItem {
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0008.png"
            }
        }


        StarItem {
            width: 20; height: 20
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0009.png"
            }
        }


        StarItem {
            width: 30; height: 30
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0010.png"
            }
        }


        StarItem {
            width: 30; height: 30
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0011.png"
            }
        }


        StarItem {
            width: 20; height: 20
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0012.png"
            }
        }


        StarItem {
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0013.png"
            }
        }


        StarItem {
            width: 64; height: 64
            Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
            Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0014.png"
            }
        }



    }


}

